<!DOCTYPE html>
<html lang="en">
<head>
    <title>管理系统 - 管理中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta ng-include="'head.html'"> -->
    <style type="text/css">
        #myModalLabel{ height:35px;}
        #editForm{overflow-x:hidden;overflow-y:auto; max-height:500px}

    </style>

    <script src="../lib/js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/build.js" type="text/javascript"></script>
    <script src="../js/public.js" type="text/javascript"></script>
</head>
<body class="flat-blue">
<div class="app-container H100" ng-app="myApp" ng-controller="myCtrl">
<div class="row content-container H100">
<div ng-include="'menus.html'" onload="loadReady()"></div>
<div class="container-fluid H100 pb15">
<div class="side-body padding-top H100" id="main" style="padding-top:70px">
    <!------------------Main---------------->
    <div class="H100" style="width:99%; background-color:#404a59; ">
        <div class="col-md-3 H100" style="position:relative ">
            <div id="L1" style="right:10px;position:absolute;width:150px;height:150px; bottom:360px"></div>
            <div id="L2" style="right:10px;position:absolute;width:150px;height:150px; bottom:205px"></div>
            <div id="L3" style="right:10px;position:absolute;width:150px;height:150px; bottom:50px"></div>
        </div>
        <div class="col-md-6" style="height:100%">
            <div style="text-align:center; color:#00ffff; vertical-align:middle; padding-top:20px; ">
                <div style="font-size:18px">
                    全国空分装置分布概况
                </div>
                <div style="font-size:12px">
                    ···············································
                </div>
            </div>
            <div id="view1" style="width:100%;top:80px; bottom:0px;position:absolute;">
            </div>
        </div>
        <div class="col-md-3" style="height:100%;color:#fff">
            <!-- 总体头部 -->
            <div style="border-bottom:2px solid #fff; margin-top:30px; padding-bottom:5px">
                <span style="">展示条件</span>
                <div style="float:right;">
                    <label ng-click="selAll()">
                        <input id="checkAll" type="checkbox" ng-model="flagAll">
                        <span style="float:right; margin-left:4px">全部</span>
                    </label>
                </div>
            </div>
            <!-- 可拖动进度条 -->
            <div id="dragSel" style="height:60px">

            </div>
            <!-- 单选框组 -->
            <div style="margin-top:20px; font-family:宋体; height:80px;padding-bottom:30px; border-bottom:1px dashed #fff">
                <div style="float:left;text-align:center; margin-right:2px" ng-repeat="key in keys">
                    <div><input type="checkbox"  ng-model="sels[key]" ng-click="selKey(key)"></div>
                    <div><span style="float:right; margin-left:4px">{{key}}</span></div>
                </div>
            </div>
            <!-- 柱状图·筛选条件 -->
            <div style="border-bottom:2px solid #fff; margin-top:30px; padding-bottom:5px;font-family:宋体">
                <span style="">TOP 10</span>
                <div style="float:right;">
                    <label ng-click="changeSelLevel()">
                        <input name="_sl" ng-model="selLevel" value="City" type="radio" />
                        <span style="float:right; margin-left:4px;">市级</span>
                    </label>
                </div>
                <div style="float:right;">
                    <label ng-click="changeSelLevel()">
                        <input name="_sl" ng-model="selLevel" value="Province" type="radio" />
                        <span style="float:right; margin-left:4px; margin-right:8px">省级</span>
                    </label>
                </div>
            </div>
            <!-- 图 -->
            <div id="viewTop10" style="min-height: 200px">

            </div>
        </div>
        <div id="showMore" style=" cursor: pointer;left:50%;color:#fff; background:#404a59; padding:5px 20px; position:fixed; bottom:20px; z-index:999">
            更多展示
        </div>

    </div>
    <div style="">
        <!-- 暂无内容 -->
    </div>
    <!------------------End Main---------------------->
</div>  <!--End side-body-->
</div>  <!--End container-fluid-->
</div>  <!--End content-container-->
<div ng-include="'footer.html'"></div>
</div>  <!--End app-container-->

<script type="text/javascript" src="../lib/js/echarts.v3.min.js"></script>
<script type="text/javascript" src="../js/citys.js"></script>
<script type="text/javascript" src="../js/china.js"></script>
<script type="text/javascript" src="../js/dragTool.js"></script>
<script language="javascript">
    var __chart_map = null;
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        loadCtlBase($scope);
        
        clacHeight();
        $scope.selLevel = 'Province';
        $scope.names = {'钢铁':'钢铁', '化工':'化工', '石油化工':'石油化工', 
            '有色冶金':'有色冶金', '气投':'气体投资', '其它':'其它'};
        $scope.keys = Object.keys($scope.names);
        $scope.cache = {};
        $scope.sels = $scope.keys.reduce(function(a, b, i){ 
            $scope.cache[$scope.names[b]] = b  ; a[b] = true; return a; 
        }, {});

        $scope.flagAll = false;
        //// 缓存全部数据汇总
        $scope.dataAll = null;
        $scope.dataCurrent = null;
        $scope.limit = {'min':1000, 'max':130001};

        //// 拖动选择工具
        $scope.selTool = new DragTool("dragSel", [1000, 130000], function(start, stop){
            $scope.limit.min = start;
            $scope.limit.max = stop;
            loadMap("view1");
            $("#checkAll").prop("checked", false);
            cout([start, stop]);
        });
        
        //// 全选按钮
        $scope.selAll = function(){
            if(!__chart_map){
                $scope.flagAll = !$scope.flagAll;
                return;
            }
            for(var k in $scope.sels)$scope.sels[k] = true;
            $scope.selTool.config.from = 0;
            $scope.selTool.config.to = $scope.selTool.config.maxLength;
            $scope.selTool.setData(true);
            
            loadData($scope.dataAll);
        }
        //// 多选按钮·关联图形legend
        $scope.selKey = function(key){
            if(!__chart_map){
                $scope.sels[key] = !$scope.sels[key];
                return;
            }
            $scope.flagAll = false;
            loadAdditional();
            var flag = $scope.sels[key];
            __chart_map.dispatchAction({
                type: flag ? 'legendSelect' : 'legendUnSelect',
                name: $scope.names[key]
            });
        };
        //// Top10·地区或城市
        $scope.changeSelLevel = function(){
            var data = ($scope.flagAll) ? $scope.dataAll : $scope.dataCurrent;
            if($scope.selLevel=='Province')
                drawBar("viewTop10", dictToList(data.hotProvince));
            else
                drawBar("viewTop10", dictToList(data.hotCity));
        };
        //// 地图·主图
        function loadMap(id, min, max){
            if(__chart_map)__chart_map.showLoading();
            
            ajaxData('get_chart_map', $scope.limit, function(rst){
                var data = rst.data;  
                if($scope.dataAll==null)$scope.dataAll = data;
                $scope.dataCurrent = data;

                loadData(data);
            });
        }
        ////附加图形
        function loadAdditional(){
            if(__chart_map)__chart_map.showLoading();
            $scope.limit['industrys'] = $scope.keys.reduce(function(a, b){ 
                a[$scope.names[b]] = Number($scope.sels[b]); return a; 
            }, {});

            $scope.limit['industrys'] = JSON.stringify($scope.limit['industrys']);
            ajaxData('get_chart_additional', $scope.limit, function(rst){
                var data = rst.data;  
                $scope.dataCurrent = data;
                _loadData(data);

            });
        }

        function _loadData(data){
            var A = $scope.dataAll;
            drawGauge("L1", 100 * data.cpCount / A.cpCount, data.cpCount, '企业总数');
            drawGauge("L2", 100 * data.sumO / A.sumO, data.sumO, '总制氧量');
            drawGauge("L3", 100 * data.count / A.count, data.count, '总套数');

            drawBar("viewTop10", dictToList(data["hot" + $scope.selLevel]));

            __chart_map.hideLoading();
        }

        //// 通用加载数据过程
        function loadData(data){
            __chart_map = drawMap("view1", data.map);
            __chart_map.on('legendselectchanged', function(p){
                var name = $scope.cache[p.name]; 
                 $scope.sels[name] = p.selected[p.name];
                 $scope.$apply();

                 loadAdditional();
             });

            _loadData(data)
        }

        loadMap("view1");    //, 1000, 130000*0.8
        

    });

    function clacHeight(){
        var ph = $("#viewTop10").parent().height(),
            top = $("#viewTop10").position().top;
        var height = ph - top - 5;
        $("#viewTop10").height(height);
    } 

    function drawBar(id, data){
        data = data.filter(function(d){ return d.name!="";})
            .sort(function(a, b){ return a.value - b.value; });
        var option = {
            grid: { left: "60px", right:'5px', top: "15px", bottom:'10px', containLabel: false },
            "yAxis": [{
                "type": "category",
                "data": data.map(function(d){ return d.name; }),
                "axisLine": { "show": false },
                "axisTick": { "show": false, "alignWithLabel": true },
                "axisLabel": { "textStyle": { "color": "#ffb069" } }
            }],
            "xAxis": [{
                "type": "value",
                "axisLine": { "show": false },
                "axisTick": {  "show": false },
                "axisLabel": { "show": false },
                "splitLine": { "show": false }
            }],
            "series": [{
                "type": "bar", "data": data, //"barCategoryGap": "35%",
                "label": { "normal": { "show": true, "position": "insideRight",
                        "textStyle": { "color": "#ff0000" }}
                },
                barMaxWidth: 20, "itemStyle": { "normal": { color: "#00CED1" } }
            }]
        };
        Init3(option, id);
    }

    function drawMap(id, data){
        var colors = ['#ff0000', '#a6c84c', '#ffa022', '#46bee9', '#3CB371', '#00ffff'];
        var maxV = 0;
        function convertData(data) {
            var res = [];
            data.forEach(function(d) {
                var coords = getCityPosEx(d.name);
                if(coords==null) return;
                coords.push(d.value);
                if(maxV<d.value)maxV = d.value
                res.push({
                    name: d.name,
                    value: coords
                });
            })
            return res;
        }

        var series = Object.keys(data).map(function(cls, i){
            return {
                name:cls, type:'effectScatter',
                coordinateSystem: 'geo', zlevel: 2,
                rippleEffect: { period: 4, brushType: 'stroke', scale: 4 },
                label: {
                    emphasis: { position:'right', show: true, formatter: function(p){
                        return p.name + ", " + cls + ", 数量：" + p.value[2]
                    }}
                },
                symbol: 'circle',
                symbolSize: function(val) {
                    return 3 + val[2] / maxV * 10;
                },
                itemStyle: { normal: { show: false, color: colors[i] } },
                data: convertData(data[cls])
            };
        });

       var option = {
            backgroundColor: '#404a59',
            legend:{ data:Object.keys(data), textStyle:{color:"#fff"}},
            geo: {
                map: 'china', roam: true,
                label: { emphasis: { show: false } },
                layoutCenter: ['50%', '53%'], layoutSize: "100%",
                itemStyle: {
                    normal: {
                        color: 'rgba(51, 69, 89, .5)', borderColor: 'rgba(100,149,237,1)'
                    },
                    emphasis: { color: 'rgba(37, 43, 61, .5)' }
                }
            },
            series: series
        };

        // cout(option);

        return Init3(option, id);;
    }
    
    
    // data : 0-100
    function drawGauge(id, data, number, title){
        var common = {
            center: ["50%", "60%"], 
            detail: { show: false },
            axisLabel: { show:false },
            startAngle: 200, endAngle: -20,
        };
        if(number>10000)number = (number / 10000).toFixed(1) + "万";

        var option = {
            title:{ text: title || '企业总数', left:'center', top:0,
             textStyle:{ fontSize:13, color:'#fff' } },
            // backgroundColor:'#fff',
            "series": [{
                radius:'90%', type: "gauge",
                startAngle: common.startAngle, endAngle: common.endAngle, splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [
                            [0.3, '#3fa7dc'], [0.5, '#fbe010'],
                            [0.8, '#fb5310'], [1.0, "#c23531"]
                        ],
                        width: 5
                    }
                },
                splitLine: { length: 5 },
                axisTick: {
                    lineStyle: { color: "#fff", width: 2 },
                    length: 0, splitNumber: 1
                },
                title: {
                    show: true,
                    "offsetCenter": ["0", "50%"],
                    "textStyle": { "color": "#2d99e2", "fontSize": 20 }
                },
                pointer: { show: true, width:0 },
                detail: common.detail,
                center: common.center, axisLabel: common.axisLabel,
                data: [{
                    name: number || '',
                    value: 0
                }]
            }, {
                type: "gauge", radius: '72%',
                startAngle: common.startAngle, endAngle: common.endAngle,
                center: common.center, detail: common.detail,
                axisLabel: common.axisLabel,
                axisTick: { "show": false },
                splitLine: { "show": false },
                axisLine: {
                    lineStyle: {
                        "width": 20, 
                        "color": [[data / 100, "#2d99e2"], [1, "#dce3ec"]]
                    }
                },
                pointer: {
                    "width": 6, //指针的宽度
                    "length": "80%", //指针长度，按照半圆半径的百分比
                    "color": "#2d99e2"
                },
                title: {
                    "show": true,
                    "offsetCenter": ['0%', "65%"], //标题位置设置
                    "textStyle": { "color": "#2d99e2", "fontSize": 12 }
                },
                "data": [{  "value": data, "name": ""}]
            }]
        };

        Init3(option, id);
    }

    $(document).ready(function(){
        // $("#fullH").heiht();
        // loadMap("view1", 1000, 130000*0.8);

        $("#showMore").click(function(){
            window.location.href = "chartAnalysis.html";
        });

        

       
    });



    

</script>

</body>
</html>
